<template>
  <div id="app">
    <section class="view-r">
      <router-view
        :song="currentSong"
        :songList="songList"
        :paused="paused"
        :currentTime="currentTime"
        :duration="duration"
        :current-model="currentModel"
        @audio-play="audioPlay"
        @audio-pause="audioPause"
        @change-current-song="changeCurrentSong"
        @change-current-time="$refs.au.currentTime = $event"
        @change-song-from-list="changeSongFromList"
        @change-song-single="audioPlay"
        @change-model="changeModel"
        @change-song="cutSong"
        @del-song-from-list="delSongFromList"
      />
    </section>

    <section class="au-box">
      <audio
        ref="au"
        :src="
          currentSong &&
          `https://music.163.com/song/media/outer/url?id=${currentSong.id}.mp3`
        "
        @play="paused = false"
        @pause="paused = true"
        @durationchange="duration = $event.target.duration"
        @timeupdate="currentTime = $event.target.currentTime"
        autoplay
      ></audio>
      <AudioBar
        v-if="currentSong && $route.meta.showPlayBar !== false"
        :song="currentSong"
        :paused="paused"
        @audio-play="audioPlay"
        @audio-pause="audioPause"
        @show-song-list="songListShow = true"
      >
      </AudioBar>
    </section>

    <playing-list
      ref="playingList"
      :songList="songList"
      :song="currentSong"
      :songListShow="songListShow"
      :is-change-route="$route.meta.isChangeRoute"
      :paused="paused"
      :currentModel="currentModel"
      @change-song-from-list="changeSongFromList"
      @hide-list="songListShow = false"
      @del-song-from-list="delSongFromList"
      @change-model="changeModel"
      @cls-list="clsList"
    ></playing-list>
  </div>
</template>

<script>
import AudioBar from "@/components/AudioBar.vue";
import PlayingList from "@/components/PlayingList.vue";
export default {
  data() {
    return {
      currentSong: null,
      songList: null,

      paused: true,
      duration: 0,
      currentTime: 0,

      songListShow: false,

      model: [
        {
          id: 0,
          name: "列表循环",
          icon: "icon-xunhuan",
        },
        {
          id: 1,
          name: "云随机",
          icon: "icon-suiji",
        },
        {
          id: 2,
          name: "单曲循环",
          icon: "icon-xunhuan",
        },
        {
          id: 3,
          name: "心动模式",
          icon: "icon-xihuan",
        },
      ],
      currentModel: null,
    };
  },

  components: {
    AudioBar,
    PlayingList,
  },

  created() {
    //默认播放模式为循环播放
    this.currentModel = this.model[0];
  },

  watch: {
    currentTime() {
      if (this.currentTime === this.duration) {
        this.changeSong("next", true);
      }
    },
  },

  methods: {
    changeCurrentSong(data) {
      this.currentSong = data.song;
      this.songList = data.songList ? data.songList : null;
    },

    audioPlay() {
      this.$refs.au.play();
    },

    audioPause() {
      this.$refs.au.pause();
    },

    changeSongFromList(song) {
      this.currentSong = song.song || song;
    },

    changeModel() {
      let i = this.currentModel.id;
      this.currentModel = this.model[i + 1 > 3 ? 0 : i + 1];
    },

    // 当播放模式为顺序或随机时，调用PlayingList子组件的方法，判断是否需要跳转路由
    changeSongByOrder(status) {
      let i = this.songList.findIndex(
        (o) => o.song === this.currentSong || o === this.currentSong
      );
      let afterIndex;
      if (i !== -1) {
        switch (status) {
          case "next":
            i++;
            afterIndex = i >= this.songList.length ? 0 : i;
            break;
          default:
            i--;
            afterIndex = i < 0 ? this.songList.length - 1 : i;
            break;
        }

        this.$refs.playingList.changeSongFromList(this.songList[afterIndex]);
      }
    },

    changeSongByRandom() {
      let songList = this.songList.filter(
        (o) => o.song !== this.currentSong && o !== this.currentSong
      );
      let ran = Math.floor(Math.random() * songList.length);
      this.$refs.playingList.changeSongFromList(this.songList[ran]);
    },

    changeSongBySingle() {
      this.$refs.au.currentTime = 0;
      this.audioPlay();
    },

    changeSong(status, isAuto) {
      // 参数:
      //status: 表示歌曲是切下一首还是上一首  String
      //isAuto: 歌曲是否处于歌曲自动单曲循环播放
      switch (this.currentModel.id) {
        case 0:
          this.changeSongByOrder(status);
          break;
        case 1:
          this.changeSongByRandom();
          break;
        case 2:
          if (isAuto) {
            this.changeSongBySingle();
          } else {
            this.changeSongByOrder(status);
          }
          break;
        default:
          this.changeSongByOrder(status);
          break;
      }
    },

    cutSong(status) {
      this.changeSong(status);
    },

    // 通过播放列表弹窗进行删除歌单里的某首歌曲
    delSongFromList(item) {
      let i = this.songList.indexOf(item);
      this.songList = this.songList.filter((o) => o !== item);

      if (i >= this.songList.length) {
        i = 0;
      }

      if (this.songList.length === 0) {
        this.currentSong = null;
        this.$refs.au.src = "";
      } else if (this.currentSong.id === item.id && i !== -1) {
        this.currentSong = this.songList[i]?.song || this.songList[i];
        this.$refs.au.currentTime = 0;

        this.$refs.playingList.deleteSongFromList(this.currentSong);
      }
    },
    clsList() {
      this.songList = [];
      this.currentSong = null;
      this.$refs.au.src = "";
    },
  },
};
</script>

<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  position: relative;

  .au-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
